<template>
  <div>
    <Header></Header>
    <Banner :courseList="course_list" @changeCourse="changeCourse" :isIndex="false" :bannerList="BannerList.data">
      <template #search>
        <el-button plain type="primary" @click="toSearch" :icon="Search">搜索</el-button>
      </template>
    </Banner>
    <div class="question-body">
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="'ArrowRightBold'">
          <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{activeCourseName}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="activeSubjectName">{{activeSubjectName}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{currentItem_map[currentItem]}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row justify="space-between">
        <el-col :span="4">
<!--          <h5 class="mb-2">Custom colors</h5>-->
          <el-menu
                  active-text-color="white"
                  background-color="rgba(235, 244, 255, 1)"
                  class="question"
                  :default-active="currentItem"
                  text-color="rgba(102, 102, 102, 1)"
                  @select="handleSelect"
          >
            <el-menu-item index="dailyPractice">
              <el-icon><setting /></el-icon>
              <span>每日一练</span>
            </el-menu-item>
            <el-menu-item index="chapterExercise">
              <el-icon><setting /></el-icon>
              <span>章节练习</span>
            </el-menu-item>
            <el-menu-item index="examExercise">
              <el-icon><setting /></el-icon>
              <span>整卷练习</span>
            </el-menu-item>
            <el-menu-item index="topicDrill">
              <el-icon><setting /></el-icon>
              <span>真题演练</span>
            </el-menu-item>
            <el-menu-item index="mockExam">
              <el-icon><setting /></el-icon>
              <span>模拟考试</span>
            </el-menu-item>
            <el-menu-item index="collectionFolder">
              <el-icon><setting /></el-icon>
              <span>收藏夹</span>
            </el-menu-item>
            <el-menu-item index="questionsList">
              <el-icon><setting /></el-icon>
              <span>错题集</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="19">
<!--          {{currentItem}}-&#45;&#45;{{active_param}}-->
          <component :is="currentItem" :activeCourse="active_param" :currentItem="currentItem" :subject_id="activeSubjectId" :subject_name="activeSubjectName" @changeSubjectName="changeSubjectName"></component>
        </el-col>
      </el-row>
    </div>
    <staticFooter></staticFooter>
  </div>
</template>

<script>
  import staticFooter from "../../../components/staticFooter";
  import {Search} from '@element-plus/icons-vue'
  import Header from "@/components/Header";
  import Banner from "@/components/Banner";
  // 题库 动态组件
  import dailyPractice from '@/components/questionBank/dailyPractice/index'
  import chapterExercise from '@/components/questionBank/chapterExercise/index'
  import examExercise from '@/components/questionBank/examExercise/index'
  import topicDrill from '@/components/questionBank/topicDrill/index'
  import mockExam from '@/components/questionBank/mockExam/index'
  import collectionFolder from '@/components/questionBank/collectionFolder/index'
  import questionsList from '@/components/questionBank/questionsList/index'
  import {useRoute, useRouter} from "vue-router";
  import {onMounted, reactive, ref} from "vue";
  import {bannerList, courseList} from "@/api/api";
  import {ElMessage} from "element-plus";
  export default {
    name: "index",
    setup(){
      // 题库模块字典
      let currentItem_map = reactive({'dailyPractice':'每日一练',
        'chapterExercise':'章节练习',
        'examExercise':'整卷练习',
        'topicDrill':'真题演练',
        'mockExam':'模拟考试',
        'collectionFolder':'收藏夹',
        'questionsList':'错题集',
      })

      let activeCourseName = ref('');
      activeCourseName.value = localStorage.getItem('activeCourseName');
      let router = useRouter();
      let active_param = ref('');
      let changeCourse = (activeCourse) => {
        active_param.value = activeCourse.courseId
        activeCourseName.value = course_list.filter(item => item.courseID == activeCourse.courseId)[0].name;
        console.log('activeCourseName',activeCourseName.value)
        window.localStorage.setItem('activeCourseName', String(activeCourseName.value));
        getBannerList();
      }

      //当前课程
      let activeSubjectId = ref(0);
      let activeSubjectName = ref('');
      let route = useRoute();
      console.log('科目信息',route.params.subject)
      activeSubjectId = route.params.subject_id
      activeSubjectName.value = route.params.subject_name

      //banner图集合
      let BannerList = reactive({
        data:[]
      })
      let getBannerList = () =>{
        bannerList({id:localStorage.getItem('activeCourse'),type:1}).then(res =>{
          console.log('背景图集合',res.data)
          BannerList.data = res.data;
        }).catch(err =>{
          ElMessage({type:'error',message:err.message})
        })
      }
      getBannerList();

      //课程列表
      let course_list = reactive([]);
      const getCourseList = () =>{
        courseList().then(res =>{
          console.log('课程列表',res)
          course_list.push(...res.data)
          let acoutCourse = window.localStorage.getItem('activeCourse') ? window.localStorage.getItem('activeCourse') : course_list[0].courseID
          window.localStorage.setItem('activeCourse',acoutCourse);
        })
      }
      getCourseList();

      //右侧动态组件
      let currentItem = ref('dailyPractice');
      currentItem.value = localStorage.getItem('currentItem') && localStorage.getItem('currentItem') != 'undefined' ? localStorage.getItem('currentItem') : 'dailyPractice';

      //左侧menu
      const handleSelect = (key,keyPath) => {
        currentItem.value = key;
        window.localStorage.setItem('currentItem',key);
      }

      let toSearch = () =>{
        router.push({name:'Search',params:{activeName:'question'}})
      }

      let changeSubjectName = (subjectName) =>{
        activeSubjectName.value = subjectName;
      }

      onMounted(() =>{
        // let current = localStorage.getItem('currentItem')
        // if(current != 'undefined'){
        //   currentItem.value = current
        // }else{
        //   currentItem.value = 'dailyPractice'
        // }
      })
      return{
        changeSubjectName,
        activeCourseName,
        Search,
        toSearch,
        active_param,
        changeCourse,
        course_list,
        // getCourseList,
        currentItem,
        handleSelect,
        activeSubjectId,
        getBannerList,
        BannerList,
        activeSubjectName,
        currentItem_map
      }
    },
    components:{
      Header,
      Banner,
      dailyPractice,
      chapterExercise,
      examExercise,
      topicDrill,
      mockExam,
      collectionFolder,
      questionsList,
      staticFooter
    }
  }
</script>

<style>
  .el-menu-item.is-active{
    background-color: rgba(42, 130, 228, 1);
  }
</style>

<style scoped>
  .question-body{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 120px;
  }
  .question-body .breadcrumb{
    margin: 20px 0px;
  }
  .link{
    cursor: pointer;
  }
  .link :hover{
    color: #409eff;
  }
</style>
